﻿@page "/login"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    Login
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" class="rz-pb-4">
    Demonstration and configuration of the Radzen Blazor <strong>Login</strong> component.
</RadzenText>

<RadzenText Anchor="login#login-events" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Login Events
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>Login</code>, <code>Register</code> and <code>ResetPassword</code> to catch events raised by the Login component.
</RadzenText>
<RadzenExample ComponentName="Login" Example="LoginEvents">
    <LoginEvents />
</RadzenExample>

<RadzenText Anchor="login#simple-login" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12 rz-mb-6">
    Simple Login
</RadzenText>
<RadzenExample ComponentName="Login" Example="LoginSimple">
    <LoginSimple />
</RadzenExample>

<RadzenText Anchor="login#login-with-register" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12 rz-mb-6">
    Login with Register (hide password reset)
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>AllowResetPassword="false"</code> to hide the "Forgotten password" option.
</RadzenText>
<RadzenExample ComponentName="Login" Example="LoginRegister">
    <LoginRegister />
</RadzenExample>

<RadzenText Anchor="login#remember-me" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12 rz-mb-6">
    Remember me
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>AllowRememberMe="true"</code> to show "Remember Me" option.
</RadzenText>
<RadzenExample ComponentName="Login" Example="LoginRemember">
    <LoginRemember />
</RadzenExample>

<RadzenText Anchor="login#form-fields" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12 rz-mb-6">
    Form fields
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>FormFieldVariant</code> to set desired FormField for the user name and password inputs.
</RadzenText>
<RadzenExample ComponentName="Login" Example="LoginFormField">
    <LoginFormField />
</RadzenExample>

<RadzenText Anchor="login#localization" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12 rz-mb-8">
    Localization
</RadzenText>
<RadzenExample ComponentName="Login" Example="LoginLocalization">
    <LoginLocalization />
</RadzenExample>

<RadzenText Anchor="login#horizontal-login-example" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12 rz-mb-8">
    Horizontal login layout example
</RadzenText>
<RadzenExample ComponentName="Login" Example="LoginHorizontalExample">
    <LoginHorizontalExample />
</RadzenExample>

<RadzenText Anchor="login#vertical-login-example" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12 rz-mb-8">
    Vertical login layout example
</RadzenText>
<RadzenExample ComponentName="Login" Example="LoginVerticalExample">
    <LoginVerticalExample />
</RadzenExample>